/*
 * @Title: 个人游记-我的游记模块
 * @Created by: gsjPC 
 */
<template>
	<view>
		<comHeader :config="navConfig"/>
		<view class="topInfo" :style="{marginTop:statusBarHeight +'px'}">
			<view>
				<view class="infoTouxiang"><image src="/static/myPic/touXiang.png"></image></view>
				<view class="infoName">
					<text>nairenk</text>
					<text>个人描述/个性签名</text>
				</view>
			</view>
			<view class="infoGuanzhu"><text>关注</text></view>
		</view>
		<view class="midNumb">
			<view><text>50</text><text>关注</text></view>
			<view><text>24</text><text>粉丝</text></view>
			<view><text>126</text><text>获赞数</text></view>
		</view>
		<!-- 瀑布流 -->
		<mytournote-waterfall :list="list" :loading="loading" @click="choose"></mytournote-waterfall>
		<!-- <view class="botmText"><text>期待更多游记</text></view> -->
	</view>
</template>

<script>
	import mytournoteWaterfall from '@/components/nairenk-waterfall-flow/mytournote-waterfall'
	const data = require('../../../common/data.json')
	export default{
		components:{
			mytournoteWaterfall
		},
		data(){
			return{
				navConfig:{
					comScroll:0,
					isFixed:false,
					left:{
						text:'',
						isShowLeft:true,
						leftGobackColor:'black',
						leftTextColor:'',
					},
					mid:{
						isShowMid:false,
						text:''
					},
					right:{
						text:'',
						isShowRight:false,
					}
				},
				page: 1,
				start: 0,
				list: [], // 列表
				end: 0,
				loading: true
			}
		},
		methods:{
			choose(){
				// item 返回选中 JSON 对象
				console.log(item);
			},
			// 模拟加载数据
			getList() {
				if (this.list.length < data.list.length) {
					setTimeout(() => {
						this.end = this.page * 10;
						this.list = this.list.concat(data.list.slice(this.start, this.end));
						this.start = this.end;
						// 延迟 120 毫秒隐藏加载动画，为了跟组件里面的 100 毫秒定位有个平缓过度
						setTimeout(() => {
							this.loading = false;
						}, 120);
					}, 1000)
				} else {
					this.loading = false;
				}
			}
		},
		mounted(){
			  this.getList();
		},
		computed:{
			statusBarHeight(){
				return global.statusBarHeight + 48
			}
		},
		onReachBottom() {
			this.page++;
			this.loading = true;
			this.getList();
		},
	}
</script>

<style>
	/* 头部S */
	.topInfo{
		margin:24upx 70upx 53upx 22upx;
		display: flex;
		flex-direction:row;
		justify-content: space-between;
		align-items: center;
	}
	.topInfo > view{
		display: flex;
		flex-direction:row;
		justify-content: center;
		align-items: center;
	}
	.infoTouxiang{
		width:150upx;
		height:150upx;
		border-radius: 150upx;
		background-color: #DDDDDD;
	}
	.infoTouxiang image{
		width:100%;
		height: 100%;
	}
	.infoName{
		margin-left: 25upx;
	}
	.infoName text{
		display: block;
	}
	.infoName text:first-child{
		font-size: 30upx;
		color: #333333;
	}
	.infoName text:nth-child(2){
		font-size: 28upx;
		color: #666666;
	}
	.infoGuanzhu{
		padding:0 40upx;
		border-radius: 50upx;
		height: 50upx;
		line-height: 50upx;
		border:1upx solid #4E94F3;
		color: #5773FE;
		font-size: 24upx;
	}
	/* 头部E */
	.midNumb{
		width:80%;
		margin: 0 auto 36upx auto;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.midNumb > view{
		display: flex;
		flex-direction:column;
		justify-content: center;
		align-items: center;
		flex:1;
	}
	.midNumb > view text:first-child{
		color: #333333;
		font-size: 28upx;
	}
	.midNumb > view text:nth-child(2){
		font-size: 24upx;
		color: #666666;
	}
	/* .botmText{
		font-size: 24upx;
		color: #D0D0D0;
		margin:42upx auto;
		text-align: center;
	} */
</style>
